<template>
  <el-card class="category-ratio content-card">
    <template #header>
      <span>各品类占比</span>
    </template>
    <el-progress :color="colors" :percentage="80" type="dashboard">
      <template #default="{ percentage }">
        <span class="percentage-value">{{ percentage }}%</span>
      </template>
    </el-progress>
    <el-progress :color="colors" :percentage="60" type="dashboard">
      <template #default="{ percentage }">
        <span class="percentage-value">{{ percentage }}%</span>
      </template>
    </el-progress>
    <el-progress :color="colors" :percentage="45" type="dashboard">
      <template #default="{ percentage }">
        <span class="percentage-value">{{ percentage }}%</span>
      </template>
    </el-progress>
  </el-card>
</template>

<script lang="ts" setup>
const colors = [
  {color: '#f56c6c', percentage: 20},
  {color: '#e6a23c', percentage: 40},
  {color: '#5cb87a', percentage: 60},
  {color: '#1989fa', percentage: 80},
  {color: '#6f7ad3', percentage: 100},
]
</script>

<style lang="scss" scoped>
.category-ratio {
  height: 100%;
  display: flex;
  flex-direction: column;

  :deep(.el-card__body) {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
</style>
